<!-- 订单页头部份 -->
<template>
	<view class="diy-menu-header-wrap">
		<view class="delivery-seacher">
			<!-- 手机状态栏 -->
			<cc-statusbar-placeholder/>
			<!-- 导航栏 -->
			<view class="navigate-bar">
				<view class="nav-left">
					<cc-switch-text @change="handleChange" />
					<view class="seacher"><uni-icons custom-prefix="iconfont" type="icon-search" size="14" />搜索商品</view>
				</view>
				<view class="nav-right"></view>
			</view>
		</view>
		<view class="store-address-groupbuy">
			<view v-if="delivery==0" class="left">
				<view class="store-address">
					<view class="text">石岐华发广场店</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
				<view class="comment">距离您0.6km</view>
			</view>
			<view v-else class="left">
				<view class="store-address">
					<uni-icons custom-prefix="iconfont" type="icon-position" size="16" />
					<view class="text">万科金域蓝湾4标14幢2103 </view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
				<view class="comment">石岐华发广场店</view>
			</view>
			<view class="right">
				<view class="group-order">
					<image class="image" src="@/static/images/common/group-order.png" />
					<view>拼单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const handleChange = (index) => {
		delivery.value = index;
	}

	const delivery = ref(0)
</script>

<style lang="scss" scoped>
	.diy-menu-header-wrap {
		.navigate-bar {
			height: 88rpx;
			display: flex;
			padding: 0;
			justify-content: center;
			align-items: center;
			padding-left: 30rpx;

			.nav-left {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.seacher {
					color: #9b9b9b;
					display: flex;
					height: 60rpx;
					font-size: 26rpx;
					padding-left: 30rpx;
					background: #f8f8f8;
					width: 250rpx;
					border-radius: 30rpx;
					align-items: center;
					gap: 15rpx;
				}
			}

			.nav-right {
				width: 220rpx;
			}
		}
	}

	.store-address-groupbuy {
		display: flex;
		padding-top: 30rpx;
		padding-bottom: 15rpx;
		padding-left: 30rpx;

		.left {
			display: flex;
			flex-direction: column;
			flex: 1;
			gap: 10rpx;
			width: 30%;

			.store-address {
				display: flex;
				flex-direction: row;
				gap: 10rpx;
				align-items: center;

				.text {
					font-size: 32rpx;
					font-weight: 600;
					display: inline-block;
					max-width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.comment {
				font-size: 25rpx;
				color: #8a8a8a;
			}
		}

		.right {
			display: flex;
			width: 300rpx;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			padding-right: 40rpx;

			.group-order {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 5rpx;
				font-size: 28rpx;

				.image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>